import { createVNode, render } from 'vue'

// 1. 搭建函数架子
// 2. 渲染Meaasge组件
// 2.1. 以Message组件为参数调用createVNode生成一个虚拟dom，并且传入prop
// 2.2. 使用rander函数挂载函数 对虚拟dom进行挂载渲染  【准备挂载位置】
import _message from './xys-message.vue'
function Message ({ type, message }) {
  // 生成一个虚拟dom
  const MessageVNode = createVNode(
      _message,
      { type, message } // 接受prop参数
  )

  // 新增一个可以挂载的位置
  const div = document.createElement('div') // 生成一个div匀速/元素
  document.body.appendChild(div) // 追加给body

  // render渲染
  render(MessageVNode, div)

  // 渲染完过2秒隐藏
  setTimeout(() => {
    render(null, div)
  }, 2000)
}
export default Message
